<template>
    <div id="app">
        <NavBar2/>
        <div class="Submit" v-cloak>
            <div v-if="recordList.list.length==0" style="text-align:center; margin:80px 0;">
                <img src="../../assets/nohistory.png" width='150px'>
                <p style='color: #a9a9a9;'>没有相关记录</p>
            </div>
            <ul class="record-box" v-else>
                <li v-for="record in recordList.list" :key="record.id">
                    <div><span>提交时间：</span><span>{{record.created_at}}</span></div>
                    <div><span>支付方式：</span><span>{{record.pay_type}}</span></div>
                    <div><span>支付金额：</span><span>{{record.price}}</span></div>
                    <div><span>订单号：</span><span>{{record.pay_id}}</span></div>
                    <div v-if='record.status===4'><span>审核状态：</span><span :class="'c-color'+record.status">{{statusArray[record.status]}}({{JSON.parse(record.extend).reason_failure}})</span></div>
                    <div v-else><span>审核状态：</span><span :class="'c-color'+record.status">{{statusArray[record.status]}}</span></div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    // import { NavBar } from 'vant'
    import NavBar2 from '@/components/NavBar2.vue'
    import {getappealList, setRequestHaeder} from '@/api'


    export default {
        components: {
            // NavBar,
            'NavBar2':NavBar2
        },
        name: 'app',
        data(){
            return {
                recordList: {},
                statusArray: {
                    0: '等待',1: '申诉中',2: '申诉成功',4: '申诉失败'
                }
            }
        },
        created(){
            this.setRequestHaeder()
            this.getUnpayStatus()
        },
        methods: {
            setRequestHaeder(){
                console.log(this.$router.history.current.query)
                console.log('线路测试')
                setRequestHaeder(this.$router.history.current.query)
            },
            getUnpayStatus(){
                getappealList({page: 1}).then(res => {
                    if(res.status===0){
                        this.recordList = res.data
                    }
                })
            }
        }
    }
</script>

<style lang='less'>
    #app {
        font-family: "Avenir", Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: #2c3e50;
        margin-top: 50px;
        padding-bottom: 20px;
    }
    .record-box {
        list-style: none;
        li {
            width: 90%;
            margin: 15px 5% 0 5%;
            background:url('../../assets/applyhistory.png') no-repeat;
            background-size:100% 100%;
            padding: 1px 0 10px 0;
            div {
                margin-top: 10px;
                margin-left: 10px;
                display: flex;
                color: #8a8a8a;
                span {
                    width: 150px;
                }
                span:nth-of-type(2) {
                    width: 100%;
                }
                .c-color0{
                    color: #de9827;
                }
                .c-color1{
                    color: #de9827;
                }
                .c-color2{
                    color:green;
                }
                .c-color4{
                    color:red;
                }
            }
        }
    }
</style>
